<!-- IAMFE全球 -->
<template>
    <div class="iamfe">
        <div class="nav-text">
            <p>当前位置：首页>关于IIFA>IIFA全球>{{ navList[selectIndex].name }}</p>
        </div>
        <div class="iamfe-content">
            <ul class="nav">
                <li>
                    <img src="../assets/img/全球.png" style="width: 55px;height: 55px;" alt="" srcset="">
                    <p>IIFA全球</p>
                </li>
                <li v-for="(item, index) in navList" :key="index" @click="clickIamfe(index)"
                    :class="{ 'hover': hoverClass == item }">
                    <img src="../assets/img/1453-10统一.png" alt="" style="width: 30px;height: 30px;margin-right: 10px;" srcset="">
                    <p>{{ item.name }}</p>
                </li>
            </ul>
            <International_1 v-show="selectIndex === 1" />
            <International_2 v-show="selectIndex === 0" />
            <International_3 v-show="selectIndex === 2" />
            <International_4 v-show="selectIndex === 3" />
        </div>
    </div>
</template>
<script lang="ts" setup>

const selectIndex = ref(0)

interface NavItem {
    name: string
}

const navList = ref<NavItem[]>([{ name: '学会简介' }, { name: '标准委员会' }, { name: '发展历程' }, { name: '核心价值观' }])

const hoverClass = ref<NavItem>(navList.value[0]);

function clickIamfe(index: number) {
    console.log(index, 'index')
    selectIndex.value = index
    hoverClass.value = navList.value[index]
}
</script>
<style scoped lang='less'>
.hover {
    color: red !important;

}

:deep(.ql-align-center) {
    text-align: center;
}

.iamfe {
    margin: 10px 0;
    width: 100%;
    // min-height: 100%;
    height: fit-content;
    background-color: #ffffff;

    .nav-text {
        width: 1300px;
        margin: 0 auto 15px;

        p {
            font-size: 14px;
            padding: 15px 10px 15px 0;
            position: relative;
        }

        &::after {
            content: "";
            background-color: #efe7e7;
            position: absolute;
            left: 0;
            width: 100%;
            height: 1px;
        }
    }

    .iamfe-content {
        width: 1300px;
        height: calc(100% - 45px);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;

        >ul {
            width: 200px;
            height: 434px;

            li {
                font-size: 16px;
                padding: 10px 20px !important;

                >p {
                    font-size: 16px;
                }
            }

            >li:first-child {
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                padding: 20px 0;
                background: #00499D;
                font-size: 14px;
                color: #ffffff;
                cursor: pointer;
            }

            >li:not(:first-child) {
                display: flex;
                align-items: center;
                background: #F1F5F9;
                padding: 0 20px;
                font-size: 14px;
                cursor: pointer;
            }

            >li:not(:last-child) {
                margin-bottom: 8px;

            }
        }

    }
}
</style>
